<template>
  <div>
    <van-nav-bar class="nav_bar">
      <template #left>
        <van-icon name="arrow-left" size="18" color="white" />
      </template>
      <template #title>
        <van-search
          placeholder="请输入搜索关键词"
          class="vue_search"
          :label="text"
          left-icon="search"
          @click="goCityList"
        />
      </template>
      <template #right>
        <van-icon name="location-o" size="18" color="white" @click="$router.push('/map')" />
      </template>
    </van-nav-bar>

    <van-dropdown-menu>
      <van-dropdown-item title="地区" ref="area">
        <van-picker title="地区" :columns="columns1" ref="picker_area"  >
          <template #columns-bottom>
            <van-button type="default" class="btn1" @click="closePicker('area')"
              >取消</van-button
            >
            <van-button type="default" class="btn2" @click="submitList('picker_area')">确认</van-button>
          </template>
        </van-picker>
      </van-dropdown-item>
      <van-dropdown-item title="方式" ref="method">
        <van-picker title="方式" :columns="columns2" ref="picker_method" >
          <template #columns-bottom>
            <van-button
              type="default"
              class="btn1"
              @click="closePicker('method')"
              >取消</van-button
            >
            <van-button type="default" class="btn2" @click="submitList('picker_method')"
              >确认</van-button
            >
          </template>
        </van-picker>
      </van-dropdown-item>
      <van-dropdown-item title="租金" ref="money">
        <van-picker title="地区" :columns="columns3" ref="picker_money" >
          <template #columns-bottom>
            <van-button
              type="default"
              class="btn1"
              @click="closePicker('money')"
              >取消</van-button
            >
            <van-button type="default" class="btn2"  @click="submitList('picker_money')" >确认</van-button>
          </template>
        </van-picker>
      </van-dropdown-item>
      <van-dropdown-item title="筛选" @open="show = !show">
        <!-- <van-button type="default" @click="show=!show">默认按钮</van-button> -->
      </van-dropdown-item>
    </van-dropdown-menu>

    <!-- 筛选 -->
    <van-popup
      v-model="show"
      position="right"
      :style="{ height: '100%', width: '70%' }"
    >
      <div class="rightPopover">
        <dl>
          <dt>户型</dt>
          <dd>
            <span
              
              @click="changeStyle(item.value)"
              v-for="item in body.roomType"
              :key="item.value"
              :ref="item.value"
              >{{ item.label }}</span
            >
          </dd>
          <dt>朝向</dt>
          <dd>
            <span
              
              @click="changeStyle(item.value)"
              v-for="item in body.oriented"
              :key="item.value"
              :ref="item.value"
              >{{ item.label }}</span
            >
          </dd>
          <dt>楼层</dt>
          <dd>
            <span
              
              @click="changeStyle(item.value)"
              v-for="item in body.floor"
              :key="item.value"
              :ref="item.value"
              >{{ item.label }}</span
            >
          </dd>
          <dt>房屋亮点</dt>
          <dd>
            <span
             
              @click="changeStyle(item.value)"
              v-for="item in body.characteristic"
              :key="item.value"
              :ref="item.value"
              >{{ item.label }}</span
            >
          </dd>
        </dl>
    <div class="footer">
      <div class="btn2" @click="show=false">取消</div>
      <div class="btn3" @click="setAllHouse">确认</div>
    </div>
      </div>
    </van-popup>

    <van-list
      v-if="isshow"
      v-model="loading"
      :finished="finished"
      @load="onLoad"
    >
      <RenderLi v-for="(item, index) in renderList" :key="index" :item="item" />
    </van-list>

    <van-empty image="network" description="网络错误" v-if="flag" />
  </div>
</template>

<script>
import RenderLi from '@/components/RenderLi.vue'
import { setFirstCity } from '@/api/citylist'
import { getHouseList, getCityAll } from '@/api/search'
import { setKeys } from '@/utils/processData'
export default {
  name: 'Search',
  components: {
    RenderLi
  },
  props: {},
  data () {
    return {
      renderList: null,
      columns2: [],
      value: '',
      columns1: [],
      getCityList: {},
      text: localStorage.getItem('text') || '上海',
      columns3: [],
      isshow: false,
      flag: false,
      loading: false,
      finished: false,
      num: 20,
      show: false,
      subList: {},
      body:[],
      allValue:[]
    }
  },
  async created () {
        if (!this.isshow) {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
    }
    const {
      data: { body }
    } = await setFirstCity()
    body.forEach(item => {
      if (item.label === this.text) {
        this.value = item.value
      }
    })
    localStorage.setItem('id', this.value||'AREA|dbf46d32-7e76-1196')
    const { data } = await getCityAll({ id: this.value })
    // console.log(data);
    setKeys(data.body.area, this.getCityList)
    setKeys(data.body.subway, this.subList)
    setKeys(data.body.rentType, this.columns2)
    setKeys(data.body.price, this.columns3)
    this.body=data.body
    this.getCityList.children.find(item => item.text === '不限').children = [
      '不限'
    ]
    this.subList.children.find(item => item.text === '不限').children = ['不限']
    this.columns1[0] = this.getCityList
    this.columns1[1] = this.subList
    this. getrenderList(this.value)
  },
  methods: {
    goCityList () {
      this.$router.push({
        name: 'cityList',
        query: {
          text: this.text
        }
      })
    },
    closePicker(text){
      this.$refs[text].toggle(false)
    },
   async submitList(text){
          const index=this.$refs[text].getValues().length-1
    if(text==='picker_area'){
      this.isshow=false
   this.getrenderList(this.$refs[text].getValues()[index].value)
 this.closePicker('area')
    }
   else if(text==='picker_method'){
    this.isshow=false
     const {data:{body}}=  await getHouseList({cityId :this.value,rentType:this.$refs[text].getValues()[index].text})
     this.renderList=body.list
     this.closePicker('method')
     this.isshow=true
   }
   else if(text==='picker_money'){
    this.isshow=false
    const {data:{body}}=  await getHouseList({cityId :this.value,price:this.$refs[text].getValues()[index].text})
    this.renderList=body.list
         this.closePicker('money')
     this.isshow=true
   }
    this.onLoad()
    // getHouseList()
    },
   async getrenderList(value){
        if (!this.isshow) {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
    }
  try {
      const { data } = await getHouseList({
        id: value,
        start: 1,
        end: this.num
      })
      if (data) {
        this.isshow = true
      }
      this.renderList = data.body.list
    } catch (error) {
      this.flag = true
    }
    },
    changeStyle(value){
    if(this.$refs[value][0].classList.value.includes('green')){
      this.$refs[value][0].classList.remove('green')
      this.allValue=this.allValue.filter(item=>item!==value)
    }
    else{
      this.$refs[value][0].classList.add('green')
      this.allValue.push(value)
    }  
    },
    async onLoad () {
      const { data } = await getHouseList({
        id: this.value,
        start: 1,
        end: this.num
      })
      this.renderList = [...this.renderList, ...data.body.list]
      this.loading = false
      this.num += 20
      if (this.renderList.lenrth > 107586) {
        this.finished = true
      }
    },
  async setAllHouse(){
    this.isshow=false
const{data:{body}}= await getHouseList({cityId :this.value,more:this.allValue.join('|')})
 this.renderList=body.list
 this.show=false
 this.isshow=true
}
  }
}
</script>

<style scoped lang="less">
.nav_bar {
  background-color: #23d881;
  /deep/ .van-nav-bar__title {
    max-width: 100%;
  }
}
.vue_search {
  flex: 1;
  width: 300px;
  height: 46px;
  background-color: #23d881;
  z-index: 999;
  /deep/ .van-icon-search {
    color: #ccc;
    border-left: 1px solid #ccc;
    padding-left: 10px;
  }
}
.header {
  display: flex;
  justify-content: center;
  padding-top: 30px;
  padding-left: 10px;
  margin-bottom: 20px;
  .btn1,
  .btn2 {
    margin-right: 10px;
    height: 30px;
    width: 30px;
  }
  .btn2 {
    margin-left: 10px;
  }
  input {
    flex: 1;
  }
}
.select {
  padding: 0 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
  ul {
    display: flex;
    justify-content: space-around;
    li {
      select {
        width: 50px;
      }
    }
  }
}
/deep/.btn1 {
  text-align: center;
  color: #23d881;
  width: 120px;
  height: 50px;
  font-size: 18px;
}
/deep/.btn2 {
  background-color: #23d881;
  width: 255px;
  height: 50px;
  color: #fff;
  font-size: 18px;
}
.rightPopover {
  overflow: auto;
  padding-bottom: 50px;
  background-color: #fff;
  display: block;
  color: #333;
  dl {
    padding: 0 15px;
    font-size: 14px;
    dt {
      margin: 20px 0;
      font-size: 15px;
      dd {
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 14px;
      }
    }
  }
  span {
    display: inline-block;
    height: 32px;
    width: 70px;
    margin: 0 18px 15px 0;
    border: 1px solid #ddd;
    border-radius: 3px;
    line-height: 32px;
    text-align: center;
    font-size: 12px;
    color: #888;
  }

  .addstyle {
    border: 1px solid #21b97a !important;
    color: #21b97a !important;
    background-color: #defaef;
  }
}
.buttonclick1 {
  position: sticky;
  left: 0;
  right: 0;
  bottom: 50px;
  z-index: 3;
  display: flex;
  .van-button--default {
    flex: 1;
    color: #21b97a;
    height: 50px;
  }
  .van-button--primary {
    flex: 2;
    background-color: #21b97a;
    height: 50px;
  }
}
.green{
  background-color: #21b97a;
}
.footer {
  display: flex;
  justify-content: space-around;
  height: 50px;
  width: 100%;
  text-align: center;
  line-height: 50px;
  color: #999;
  font-size: 17px;
  background-color: #fff;
  div {
    flex: 1;
    width: 125px;
    border: 1px solid #ccc;
  }
  .btn3 {
    background-color: #21b97a;
    color: #fff;
  }
}
</style>
